<template>
  <div class="md-color-select-base">
    <div class="color-list">
      <span v-for="item in options" :key="item.value" :style="{background:item.label}" @click="handleClick(item)">
        <i class="el-icon-check" v-if="current===item.label"></i>
      </span>
    </div>
    <div class="color-oper">
      <span class="btn-default">默认</span>
      <span class="btn-custom" :style="{background:current}">自定义
        <el-color-picker v-model="current" size="mini" @change="handleChange"></el-color-picker>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MdColorSelectBaseComponent',
  props: {
    value: {
      type: String,
      default: null
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      current: '#436605',
      color: '#436605'
    }
  },
  watch: {
    value: {
      handler (val) {
        if (val) {
          this.current = val
        }
      }
    }
  },
  mounted () { },
  methods: {
    handleClick (item) {
      this.current = item.label
      this.$emit('input', this.current)
      this.$emit('change', this.current)
    },
    handleChange (event) {
      this.current = event
      this.$emit('input', this.current)
      this.$emit('change', this.current)
    }
  }
}
</script>


<style lang="less" scoped>
.md-color-select-base {
  width: 100%;
  box-sizing: border-box;
  .color-list {
    float: left;
    width: 500px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    span {
      width: 34px;
      height: 34px;
      line-height: 34px;
      border-radius: 4px;
      margin-right: 5px;
      margin-bottom: 10px;
      text-align: center;
      cursor: pointer;
      i {
        color: #fff;
        font-size: 30px;
      }
    }
  }
  .color-oper {
    float: left;
    width: 150px;
    span {
      margin-right: 20px;
      cursor: pointer;
      &.btn-default {
        color: @md-primary-color;
      }
      &.btn-custom {
        border-radius: 4px;
        color: #fff;
        padding: 3px 10px;
        position: relative;
        .el-color-picker {
          position: absolute;
          left: 25%;
          top: -2px;
          opacity: 0;
        }
      }
    }
  }
  .clearfix();
}
</style>
